<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="queryParams" size="small" label-width="84px">
        <el-form-item label="发布部门">
          <!--          <el-select v-model="queryParams.deptNo" placeholder="请选择发布部门">-->
          <!--            <el-option-->
          <!--                v-for="item in departmentList"-->
          <!--                :key="item.id"-->
          <!--                :label="item.name"-->
          <!--                :value="item.name"-->
          <!--            ></el-option>-->
          <!--          </el-select>-->
          <el-cascader
            v-model="queryParams.deptNo"
            :options="departmentList"
            :props="{ checkStrictly: true, value: 'deptId', label: 'deptName', emitPath: false }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="状态">
          <el-select @change="handleStatusChange" v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-date-picker
            :disabled="+queryParams.status === 100"
            v-model="queryParams.time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button icon="el-icon-plus" @click="handleAdd">添加公告</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="gmtCreated" label="创建时间"></el-table-column>
        <el-table-column prop="deptName" label="发布部门"></el-table-column>
        <el-table-column prop="releaseTime" label="发布时间"></el-table-column>
        <el-table-column
          prop="top"
          label="是否置顶"
          :formatter="(row, column, v) => (v === 1 ? '否' : '是')"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          :formatter="(row, column, v) => (v === 100 ? '待发布' : '已发布')"
        ></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleRelease(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.status === 100"
              >发布</el-button
            >
            <el-button @click.native.prevent="handleWithdraw(scope.row)" type="text" size="small" v-else
              >撤回</el-button
            >
            <el-button @click="handleEdit(scope.row)" type="text" size="small" v-if="scope.row.status === 100"
              >编辑</el-button
            >
            <el-button @click="handleEdit(scope.row)" type="text" size="small" v-else>查看</el-button>
            <el-button @click.native.prevent="handleDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>
    <!-- 编辑弹出框 -->
    <room-modal ref="RoomModal" @ok="modalOk" :department-list="departmentList"></room-modal>
  </section>
</template>

<script>
import { noticeList, getDepartmentList, deleteNotice, releaseNotice, withdrawNotice } from './js/notice'
import RoomModal from './modules/RoomModal'
import { meetingRoomType } from './js/constants'
export default {
  components: { RoomModal },
  data () {
    return {
      queryParams: {
        deptNo: '',
        status: '',
        time: ''
      },
      departmentList: [],
      statusList: [
        {
          id: 100,
          name: '待发布'
        },
        {
          id: 200,
          name: '已发布'
        }
      ],
      pageNum: 1,
      pageSize: 10,
      totalPageNum: 10,
      tableData: [],
      dialogFormVisible: true,
      formLabelWidth: '100px'
    }
  },
  mounted () {
    this.getNoticeList()
    this.getDepartmentList()
    // this.getFloorData()
  },

  methods: {
    // 验证楼层及人数
    inputCheck (rule, val, callback) {
      const checkTips = {
        roomScale: '请输入人数'
      }
      if (val.toString().trim() === '') {
        callback(new Error(checkTips[rule.field]))
      } else if (!isNaN(val)) {
        callback()
      } else {
        callback(new Error('请输入数字'))
      }
    },
    // 获取楼层列表
    // async getFloorData() {
    //   const {
    //     result: { pageResult }
    //   } = await getDictionaryList({
    //     dataType: 2,
    //     orderSequence: 'DESC'
    //   })
    //   this.floorData = pageResult
    // },
    // 获取部门
    async getDepartmentList () {
      let res = await getDepartmentList()
      this.departmentList = this.delEmptyChildren(res.data)
    },
    // 删除tree中空children
    delEmptyChildren (arr) {
      arr.forEach(e => {
        if (!e.hasOwnProperty('children')) return
        if (e.children.length !== 0) {
          this.delEmptyChildren(e.children)
        } else {
          delete e.children
        }
      })
      return arr
    },
    // 获取会议室列表
    onSubmit () {
      this.getNoticeList()
    },
    async getNoticeList () {
      const params = {
        deptNo: this.queryParams.deptNo,
        startTime: this.queryParams.time ? this.queryParams.time[0] : undefined,
        endTime: this.queryParams.time ? this.queryParams.time[1] : undefined,
        status: this.queryParams.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      const data = Object.assign({}, params)
      let res = await noticeList(data)
      this.tableData = res.data.list
      this.totalPageNum = res.data.total
    },
    // 编辑按钮
    handleEdit (row) {
      this.$refs.RoomModal.title = '公告编辑'
      this.$refs.RoomModal.isAdd = false
      this.$refs.RoomModal.edit(row)
    },
    // 新增按钮
    handleAdd () {
      this.$refs.RoomModal.title = '公告新增'
      this.$refs.RoomModal.isAdd = true
      this.$refs.RoomModal.add()
    },
    formatter (row, column, cellValue) {
      return this.$base.constFormatter(meetingRoomType, cellValue)
    },

    // 删除按钮
    handleDelete (row) {
      this.$confirm('此操作将永久删除该公告，是否继续执行？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dataDelete(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async dataDelete (row) {
      let res = await deleteNotice(row.no)
      if (res.code === 0) {
        this.$message.success('删除成功')
      } else {
        this.$message.warning(res.msg)
      }
      this.getNoticeList()
    },
    // 发布
    handleRelease (row) {
      this.$confirm('此操作将发布该公告，是否继续执行？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dataRelease(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发布'
          })
        })
    },
    async dataRelease (row) {
      let res = await releaseNotice(row.no)
      if (res.code === 0) {
        this.$message.success('发布成功')
      } else {
        this.$message.warning(res.msg)
      }
      this.getNoticeList()
    },
    // 撤回
    handleWithdraw (row) {
      this.$confirm('此操作将撤回该公告，是否继续执行？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dataWithdraw(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤回'
          })
        })
    },
    async dataWithdraw (row) {
      let res = await withdrawNotice(row.no)
      if (res.code === 0) {
        this.$message.success('撤回成功')
      } else {
        this.$message.warning(res.msg)
      }
      this.getNoticeList()
    },
    // 切换状态
    // async changeStatus($event, row) {
    //   let { msg } = await editMeetingRoom({
    //     id: row.id,
    //     roomStatus: $event
    //   })
    //   this.$message.success(msg)
    // },

    // 状态改变提交
    handleStatusChange (val) {
      if (+val === 100) {
        this.queryParams.time = ''
      }
    },

    // 分页
    pageHandleChange (page) {
      this.pageNum = page
      this.getNoticeList()
    },
    modalOk () {
      this.getNoticeList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .header-card {
    margin-bottom: 10px;
  }
  .table-card {
    .el-pagination {
      text-align: center;
      display: block;
      margin: 10px auto;
    }
    /deep/ .el-table th {
      display: table-cell !important;
    }
    .endTime {
      margin-left: 20px;
    }
    .time-span {
      margin-right: 5px;
    }
  }
  .el-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>
